<!-- iheader -->
<ion-header>
  <ion-toolbar>
    <ion-title>购物车</ion-title>
  </ion-toolbar>
</ion-header>
<!-- icontent -->
<ion-content>
  <!-- 购车为空时显示的信息 -->
  <div
    *ngIf="data.length == 0"
    style="margin-top: 200px; font-size: 25px; text-align: center"
  >
    空空如也,买点儿东西吧
  </div>
  <!-- 显示添加到购车的信息 -->
  <div *ngFor="let item of data;let i = index" class="cell">
    <div>
      <!-- 标题 -->
      <div>{{item.title}}</div>
      <!-- 描述 -->
      <div>{{item.spec}}</div>
    </div>
    <!-- 价格 -->
    <div>¥{{item.price}}</div>
    <!-- 数量操作 -->
    <div>
      <ion-button
        size="small"
        fill="outline"
        (click)="updateCount(i,-1)"
        [disabled]="item.count == 1"
      >
        <ion-icon name="remove-outline"></ion-icon>
      </ion-button>
      <span>{{item.count}}</span>
      <ion-button size="small" (click)="updateCount(i,+1)">
        <ion-icon name="add"></ion-icon>
      </ion-button>
    </div>
    <div>
      <ion-button size="small" color="danger" (click)="doDel(i)">删除</ion-button>
    </div>
  </div>
  <div style="text-align: right; padding: 30px">
    <ion-button color="success">去结算</ion-button>
  </div>
</ion-content>
